<template>
    <div>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
            <el-form-item prop="orgId">
                <el-select filterable v-model="searchForm.orgId" placeholder="请选择业主单位">
                <el-option
                    v-for="item in orgOptions"
                    :key="item.organizationId"
                    :label="item.shortName"
                    :value="item.organizationId">
                </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="id">
                <tree-select
                    v-model="searchForm.id"
                    placeholder="请选择部门"
                    filterable
                    :data="treeData"
                    :defaultProps="defaultProps"
                    :checkedKeys="defaultCheckedCategoryId"
                    :nodeKey="typeNodeKey">
                </tree-select>
            </el-form-item>
            <el-form-item prop="cycle">
                <el-select filterable v-model="searchForm.cycle" placeholder="请选择绩效周期">
                    <el-option
                        v-for="item in cycleList"
                        :key="item.label"
                        :label="item.label"
                        :value="item.label">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                    v-if="searchForm.cycle=='季度'"
                    v-model="searchForm.time"
                    align="right"
                    type="year"
                    placeholder="选择年"
                    >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                v-if="searchForm.cycle=='月度'"
                v-model="searchForm.time1"
                type="monthrange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                >
                </el-date-picker>
                <el-date-picker
                    v-if="searchForm.cycle=='年度'"
                    v-model="searchForm.time3"
                    align="right"
                    type="year"
                    placeholder="选择年"
                    >
                </el-date-picker>
                <el-select filterable v-if="searchForm.time && searchForm.cycle=='季度'" v-model="searchForm.time2" placeholder="请选择季度">
                    <el-option
                        v-for="item in dataList"
                        :key="item.label"
                        :label="item.label"
                        :value="item.label">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button class="form-search-btn" type="primary" @click="search">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-row class="overclick-wrap" :gutter="40">
            <el-col :span="8">
                <div class="item-wrap">
                    <div class="item-content">
                        <p class="item-title">最高分</p>
                        <p class="item-value color-4">{{ statistics.heighGrade }}</p>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item-wrap">
                    <div class="item-content">
                        <p class="item-title">平均分</p>
                        <p class="item-value color-4">{{ statistics.averageGrade }}</p>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item-wrap">
                    <div class="item-content">
                        <p class="item-title">最低分</p>
                        <p class="item-value color-4">{{ statistics.minGrade }}</p>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-table
        :data="tableData"
        ref="equipmentThingsTableList"
        style="width: 100%">
            <el-table-column type="expand" width='1'>
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <label>组织绩效明细</label>
                        <el-table
                        :data="getDetailTable[props.row.id]"
                        border
                        style="width: 100%">
                        <span style="display:none;">{{freashFlag}}</span> 
                            <el-table-column 
                            prop="name" 
                            label="评估项" >
                                <!-- 图片的显示 -->
                            </el-table-column>
                            <el-table-column
                                prop="evaluateData"
                                label="实际数据"
                                :formatter="evaluateDataFormatter">
                            </el-table-column>
                            <el-table-column
                                prop="ruleDesc"
                                label="目标"
                                :formatter="ruleDescFormatter">
                            </el-table-column>
                            <el-table-column
                                prop="totalPoints"
                                label="分数分配">
                            </el-table-column>
                            <el-table-column
                                prop="evaluateDesc"
                                label="得分计算方法"
                                :formatter="evaluateDescFormatter">
                            </el-table-column>
                            <el-table-column
                                prop="singleSorce"
                                label="得分">
                            </el-table-column>
                        </el-table>
                        <label>内部员工绩效明细</label>
                        <el-table
                        :data="getPerRecordsTable[props.row.id]"
                        border
                        style="width: 100%">
                        <span style="display:none;">{{freashFlag}}</span> 
                            <el-table-column
                                label="序号"
                                type="index"
                                width="100px">
                            </el-table-column>
                            <el-table-column 
                            prop="departmentTree" 
                            label="组织" >
                                <!-- 图片的显示 -->
                            </el-table-column>
                            <el-table-column
                                prop="position"
                                label="职位">
                            </el-table-column>
                            <el-table-column
                                prop="name"
                                label="员工">
                            </el-table-column>
                            <el-table-column
                                prop="sorce"
                                label="得分">
                            </el-table-column>
                            <el-table-column
                                label="排名"
                                type="index"
                                width="100px">
                            </el-table-column>
                            <el-table-column
                                prop="performanceDetail"
                                label="绩效明细">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small"  data-link="StaffPerformance" @click="jumpMaintain(scope.row)">查看</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                label="序号"
                type="index"
                width="100px">
            </el-table-column>
            <el-table-column 
            prop="cycleType" 
            label="绩效周期"
            :formatter="cycleTypeFormatter" >
                <!-- 图片的显示 -->
            </el-table-column>
            <el-table-column
                prop="timeDsc"
                label="时间范围">
            </el-table-column>
            <el-table-column
                prop="organizationName"
                label="所在单位">
            </el-table-column>
            <el-table-column
                prop="departmentTree"
                label="上级部门">
            </el-table-column>
            <el-table-column
                prop="name"
                label="部门">
            </el-table-column>
            <el-table-column
                prop="sorce"
                label="绩效得分">
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleDetail(scope.row)" type="text" size="small">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        background
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
</template>
<script>
import { getOrgList} from '@/api/org'
import utils from '@/utils/util'
import TreeSelect from '@/libs/TreeSelect/Main'
import { getPerRecordsList,getDepartmentTree,getPerRecordsStatistics,getPerRecordsDetail} from '@/api/rdLearnOrg'
export default {
    components: { 
        TreeSelect,
    },
    data() {
        return {
            freashFlag:0,
            addTitle:'',//新增标题
            orgOptions:[],//单位下拉框
            utils: utils,
            tableData:[],//组织资料列表
            isMuilUnitUser:this.$store.state.userinfo.isMuilUnitUser,
            //搜索
            searchForm: {
                id:'',
                orgId:''/*this.$store.state.userinfo.org.id*/,
                name: '',
                time:'',
                time1:'',
                time2:'',
                time3:'',
                cycle:'',
            },
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            // 展开详情
            defaultTabsName: 'realTimeStatusRecord',
            detailList: {},
            getDetailTable:{},
            //scoreType:-1,//分数类型筛选
            defaultProps: {
                children: 'nodes',
                label: 'name',
                value: 'id'
            },
            // 统计
            statistics: {
                heighGrade: 0,
                averageGrade: 0,
                minGrade: 0
            },
            typeNodeKey: 'id',
            defaultCheckedCategoryId: [],
            treeData:[],
            departmentIdList:[],
            cycleList:[{label:'月度'},{label:'季度'},{label:'年度'}],
            dataList:[{label:'第一季度'},{label:'第二季度'},{label:'第三季度'},{label:'第四季度'}],
            getPerRecordsTable:[],
                
        }
    },
    created() {
        let that = this
        //绑定下拉框
        getOrgList({queryType: 0}).then((data)=>{
            this.orgOptions.push.apply(this.orgOptions,data.data);
        })
        that.getTreeList();
        that.getPerRecordsStatistics();
        that.getPerRecordsList();
    },
    methods: {
        //搜索
        search(){
            let that = this;
            that.currentPage=1;
            that.getPerRecordsList();
            that.getPerRecordsStatistics();
        },
        // 详情
        handleDetail(row) {
            let that = this
            const $table = this.$refs.equipmentThingsTableList
            row.isExpand = !row.isExpand;//给row一个自定义展开状态
            $table.toggleRowExpansion(row)
            if(row.isExpand){
                if (row && !that.detailList.hasOwnProperty('device_' + row.id)) {
                    let obj = {
                        defaultTabsName: 'realTimeStatusRecord',
                        brokenRecord: {},
                        moreInfo: {},
                    }
                    //that.$set(that.detailList, 'device_' + row.id, obj)
                }
                getPerRecordsDetail({recordId:row.id}).then(res => {
                    that.getDetailTable[row.id] = res.data;
                    that.freashFlag++
                })
                that.getPerRecordsList1(row,row.bizId,row.startTime,row.endTime,row.cycleType);
            }
        },
        //数据格式化
        ruleDescFormatter: function (row, column) { 
            if(JSON.parse(row.ruleDesc)){
                if(JSON.parse(row.ruleDesc).data[0].indexOf("$r")!=-1){
                    let a = JSON.parse(row.ruleSet)
                    return JSON.parse(row.ruleDesc).data[0].replace('$r',a)
                }else{
                    return JSON.parse(row.ruleDesc).data[0]
                }
            }
        },
        evaluateDescFormatter: function (row, column) {
            if(JSON.parse(row.evaluateDesc).data[0].indexOf("$e1")!=-1){
                let a = JSON.parse(row.arithmeticConfig).$e1
                let evaluateDesc = JSON.parse(row.evaluateDesc).data[0];
                evaluateDesc=evaluateDesc.replace('$e1',a)
                if(JSON.parse(row.arithmeticConfig).$e2){
                    evaluateDesc = JSON.parse(row.evaluateDesc).data[0]+JSON.parse(row.evaluateDesc).data[1];
                    let b = JSON.parse(row.arithmeticConfig).$e2
                    evaluateDesc=evaluateDesc.replace('$e2',b)
                    evaluateDesc=evaluateDesc.replace('$e1',a)
                }
                return evaluateDesc
            }else if(JSON.parse(row.evaluateDesc).data[0].indexOf("$s")!=-1 || JSON.parse(row.evaluateDesc).data[1].indexOf("$s")!=-1){
                let a = JSON.parse(row.totalPoints)
                if(JSON.parse(row.evaluateDesc).data[1]){
                    let evaluateDesc = JSON.parse(row.evaluateDesc).data[0]+JSON.parse(row.evaluateDesc).data[1];
                    return evaluateDesc.replace('$s',a)
                }else{
                     return JSON.parse(row.evaluateDesc).data[0].replace('$s',a)
                }
            }
            
        },
        cycleTypeFormatter: function (row, column){
            if(row.cycleType == 1){
                return "月度"
            }else if(row.cycleType == 2){
                return "季度"
            }else if(row.cycleType == 3){
                return "年度"
            }
        },
        evaluateDataFormatter:function (row, column) {
            if(JSON.parse(row.evaluateData)){
                if(row.name == "值班"){
                return "迟到"+ JSON.parse(row.evaluateData).d1 +','+ "早退" + JSON.parse(row.evaluateData).d2 + ',' + "缺卡次数" + JSON.parse(row.evaluateData).d3
                }else if(row.name == "登录时长"){
                    return "实际小时数"+ JSON.parse(row.evaluateData)[0].d1
                }else if(row.name == "应答"){
                    return "未应答"+ JSON.parse(row.evaluateData).d1
                }else if(row.name == "接警速度"){
                    return "超时次数"+ JSON.parse(row.evaluateData).d1 +','+ "总次数" + JSON.parse(row.evaluateData).d2
                }else if(row.name == "警情复位速度"){
                    return "平均时间"+ JSON.parse(row.evaluateData).d1
                }else if(row.name == "日常巡检完成度"){
                    return "遗漏数"+ JSON.parse(row.evaluateData).d1 +','+ "总数" + JSON.parse(row.evaluateData).d2
                }else if(row.name == "隐患创建"){
                    let d1 = JSON.parse(row.evaluateData).d1
                    return "创建数量"+ JSON.parse(row.evaluateData).d1
                }else if(row.name == "隐患整改"){
                    return "整改总数"+ JSON.parse(row.evaluateData).d1 +','+ "超时完成整改数量" + JSON.parse(row.evaluateData).d2
                }else if(row.name == "学习时长"){
                    return "学习时长"+ JSON.parse(row.evaluateData).d1 +'小时'
                }else if(row.name == "考试"){
                    let evaluateData = ''
                    for(var i = 0;i<JSON.parse(row.evaluateData).length;i++){
                        evaluateData = evaluateData+','+JSON.parse(row.evaluateData)[i].d1
                    }
                    return '每场考试得分'+evaluateData
                }
            }
        },
        //获取列表数据
        getPerRecordsList(pageIndex, pageSize){
            let that = this;
            let flag = ''
            if (pageIndex) {
                that.currentPage = pageIndex
            }
            if (pageSize) {
                that.pageSize = pageSize
            }
            if(that.searchForm.cycle!=null){
                if(that.searchForm.cycle == '月度'){
                    flag =1 
                }else if(that.searchForm.cycle == '季度'){
                    flag =2
                }else if(that.searchForm.cycle == '年度'){
                    flag =3
                }
            }
            var startTime = ''
            var endTime =''
            if(that.searchForm.time1 && that.searchForm.cycle == '月度'  && that.searchForm.time1 != null){//月份
                startTime=that.searchForm.time1[0].getFullYear() + '-' + (that.searchForm.time1[0].getMonth() + 1) + '-' + that.searchForm.time1[0].getDate() + ' 00:00:00'
                endTime = that.searchForm.time1[1].getFullYear() + '-' + (that.searchForm.time1[1].getMonth() + 2) + '-' + that.searchForm.time1[1].getDate() + ' 00:00:00'
            }
            if(that.searchForm.cycle == '季度' && that.searchForm.time != '' && that.searchForm.time != null){
                    startTime = that.searchForm.time.getFullYear() + '-1-1 00:00:00'
                    endTime = that.searchForm.time.getFullYear() + '-12-31 23:59:59'
                if(that.searchForm.time2 == '第一季度' ){
                    startTime = that.searchForm.time.getFullYear() + '-01-1 00:00:00'
                    endTime = that.searchForm.time.getFullYear() + '-03-30 23:59:59'
                }else if(that.searchForm.time2 == '第二季度'){
                    startTime = that.searchForm.time.getFullYear() + '-04-1 00:00:00'
                    endTime = that.searchForm.time.getFullYear() + '-06-30 23:59:59'
                }else if(that.searchForm.time2 == '第三季度'){
                    startTime = that.searchForm.time.getFullYear() + '-07-1 00:00:00'
                    endTime = that.searchForm.time.getFullYear() + '-09-30 23:59:59'
                }
                else if(that.searchForm.time2 == '第四季度'){
                    startTime = that.searchForm.time.getFullYear() + '-10-01 00:00:00'
                    endTime = that.searchForm.time.getFullYear() + '-12-31 23:59:59'
                }
            }
            if(that.searchForm.cycle == '年度' && that.searchForm.time3 != '' && that.searchForm.time3 != null){
                startTime=that.searchForm.time3.getFullYear() + '-1-1 00:00:00'
                endTime=that.searchForm.time3.getFullYear() + '-12-31 23:59:59'
            }
            let parames={
                orgIds: that.searchForm.orgId || this.$store.state.userinfo.organizationIds,
                departmentIds: that.searchForm.id || '',
                dateType:flag || '',
                startTime: startTime,
                endTime:endTime,
                name: that.searchForm.name,
                bizType:2,
                pageSize:that.pageSize,
                pageIndex:that.currentPage-1,
                queryType:1,
            }
            getPerRecordsList(parames).then(res => {
                that.tableData = res.data;
                that.total = res.total;
            })
        },
        //获取员工列表数据
        getPerRecordsList1(row,departmentIds,startTime,endTime,cycleType){
            let that = this;
            let parames={
                orgIds: that.searchForm.orgId || this.$store.state.userinfo.organizationIds,
                departmentIds: String(departmentIds),
                bizType:1,
                queryType:0,
                startTime: startTime,
                endTime:endTime,
                dateType:cycleType
            }
            getPerRecordsList(parames).then(res => {
                that.getPerRecordsTable[row.id] = res.data;
                that.freashFlag++
            })
        },
        //获取组织列表
        getTreeList(){
            let that = this;
            let parames={
                orgId: that.searchForm.orgId || this.$store.state.userinfo.org.id,
                orgIds: that.searchForm.orgId || that.$store.state.userinfo.organizationIds,
            }
            getDepartmentTree(parames).then(res => {
                that.treeData = res.data;
                that.departmentIdList = that.treeData[0].departmentIdList
                
                
            })
            
        },
        // 点击员工跳转
        jumpMaintain(row) {
            let params = {
                level: 2, // level  页面跳转显示   1-多单位   2-单单位
                orgId: row.organizationId, // 单位编码
                name: row.name // 搜索内容
            }
            this.$router.push({
                name:'StaffPerformance',
                params
            })
        },
        //组织绩效统计
        getPerRecordsStatistics(){
            let that = this;
            let flag = '';
            if(that.searchForm.cycle!=null){
                if(that.searchForm.cycle == '月度'){
                    flag =1 
                }else if(that.searchForm.cycle == '季度'){
                    flag =2
                }else if(that.searchForm.cycle == '年度'){
                    flag =3
                }
            }
            var startTime = ''
            var endTime =''
            if( that.searchForm.cycle == '月度' && that.searchForm.time1 != '' && that.searchForm.time1 != null){//月份
                    startTime=that.searchForm.time1[0].getFullYear() + '-' + (that.searchForm.time1[0].getMonth() + 1) + '-' + that.searchForm.time1[0].getDate() + ' 00:00:00'
                    endTime = that.searchForm.time1[1].getFullYear() + '-' + (that.searchForm.time1[1].getMonth() + 2) + '-' + that.searchForm.time1[1].getDate() + ' 00:00:00'
            }
            if(that.searchForm.cycle == '季度' && that.searchForm.time != '' && that.searchForm.time != null){
                    startTime = that.searchForm.time.getFullYear() + '-1-1 00:00:00'
                    endTime = that.searchForm.time.getFullYear() + '-12-31 23:59:59'
                    if(that.searchForm.time2 == '第一季度'){
                    startTime = that.searchForm.time.getFullYear() + '-01-1 00:00:00'
                    endTime = that.searchForm.time.getFullYear() + '-03-30 23:59:59'
                    }else if(that.searchForm.time2 == '第二季度'){
                        startTime = that.searchForm.time.getFullYear() + '-04-1 00:00:00'
                        endTime = that.searchForm.time.getFullYear() + '-06-30 23:59:59'
                    }else if(that.searchForm.time2 == '第三季度'){
                        startTime = that.searchForm.time.getFullYear() + '-07-1 00:00:00'
                        endTime = that.searchForm.time.getFullYear() + '-09-30 23:59:59'
                    }
                    else if(that.searchForm.time2 == '第四季度'){
                        startTime = that.searchForm.time.getFullYear() + '-10-01 00:00:00'
                        endTime = that.searchForm.time.getFullYear() + '-12-31 23:59:59'
                    }
            }
            if(that.searchForm.cycle == '年度' && that.searchForm.time3 != '' && that.searchForm.time3 != null){
                    startTime=that.searchForm.time3.getFullYear() + '-1-1 00:00:00'
                    endTime=that.searchForm.time3.getFullYear() + '-12-31 23:59:59'
            }
            let parames={
                orgIds: that.searchForm.orgId || this.$store.state.userinfo.organizationIds,
                departmentIds: that.searchForm.id || '',
                dateType:flag || '',
                startTime: startTime,
                endTime:endTime,
                name:that.searchForm.name || '',
                bizType:2,
            }
            getPerRecordsStatistics(parames).then(res => {
                that.statistics .heighGrade= res.data.maxSorce;
                that.statistics .averageGrade= res.data.avgSorce;
                that.statistics .minGrade= res.data.minSorce;
            })
            
        },
        handleCurrentChange(currentPage) {
            this.getPerRecordsList(currentPage)
        },
        handleSizeChange(pageSize) {
            this.getPerRecordsList(1, pageSize)
        },
        handleSelect(){//处理添加标签

        },
        learnTimeChange(value){//检测时长改变
        },
    },
    watch: {
        orgIdSelect(val, oldVal) {
            if(val && val !== oldVal) {
                this.defaultCheckedCategoryId = []
                this.searchForm.id = ''
                this.getTreeList()
                this.search()
            }
        },
    },
    computed: { 
        orgIdSelect() {
            return this.searchForm.orgId
        },
    }
}
</script>
